import React from 'react'
import {
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from 'react-native'

import { useNavigation } from '@react-navigation/native'
import { observer, useLocalObservable, Observer } from 'mobx-react-lite'
import { useStores } from '../stores'
import { TagButton } from './Button'
import CollapsibleText from './CollapsibleText'
import i18n from '../i18n'

export default observer(({ book, needButton = false, style = {} }) => {
  const navigation = useNavigation()
  const { bookApi, appearance: ap } = useStores()
  return (
    <TouchableOpacity
      activeOpacity={0.6}
      onPress={() => navigation.push('Book', { _id: book._id, title: book.name })}
      style={[styles.bookItem, style]}>
      <View style={{ ...styles.bookItemLeft }}>
        <Image
          source={{ uri: bookApi.getCoverUrl(book.cover) }}
          style={{ ...styles.bookCover }}
        />
      </View>
      <View style={{ ...styles.bookItemRight }}>
        <View style={{ flexDirection: 'row' }}>
          <View style={{ flex: 5 }}>
            <Text style={{ ...styles.bookTitle, color: ap.theme.primary }}>{book.name}</Text>
          </View>
          {
            needButton && <View style={{ alignItems: 'flex-end', flex: 2 }}>
              <TagButton
                backgroundColor={ap.theme.background}
                color={ap.theme.second}
                title={i18n.t('shelfIt')} />
            </View>
          }
        </View>
        <View style={{ flexDirection: 'row', paddingBottom: 6 }}>
          {
            book.authors &&
            book.authors.map(v =>
              <TouchableOpacity
                key={v._id} style={{ paddingRight: 5 }}
                onPress={() => navigation.push('BookList', { data: v, key: 'author' })}>
                <Text style={{ color: ap.theme.second, fontSize: 12 }}>{v.name}</Text>
              </TouchableOpacity>
            )
          }
        </View>
        {
          book.info && <CollapsibleText
            style={{ flex: 1, color: ap.theme.second, fontSize: 12 }}
            numberOfLines={2}
            labels={[i18n.t('expand'), i18n.t('collapse')]}>
            {book.info}
          </CollapsibleText>
        }
      </View>
    </TouchableOpacity>
  )
})

const styles = {
  bookItem: {
    paddingBottom: 12,
    paddingTop: 12,
    flexDirection: 'row',
  },

  bookItemLeft: {
    flex: 1,
  },

  bookItemRight: {
    flex: 4,
    paddingLeft: 12,
    paddingRight: 12,
    justifyContent: 'space-around',
  },

  bookCover: {
    borderRadius: 6,
    width: 113 * 0.55,
    height: 150 * 0.55,
  }
}